<template>
  <view class="container">
    <view class="search-wrap">
      <u--input placeholder="请输入单位名称" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
        shape="circle" v-model="likeName" @change="input_change"></u--input>
    </view>
    <view class="list-content">
      <view class="list-container">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight"
          :style="{ height: !loading && !noMore ? '100%' : '100%' }" v-if="dataSource.length">
          <view class="house-info" v-for="(item, index) in dataSource" @tap="handleDetail(item)" :key="index">
            <view class="house-name">
              <text>{{ item.companyName }}</text>
              <u-icon name="arrow-right" color="#A2A2A2"></u-icon>
            </view>
            <view class="info-row">
              <view class="label">所属分类:</view>
              <view class="value">{{ item.industryInformationName }}</view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
        <view v-if="!dataSource.length">
          <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon2.png'">
          </u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    informationTree
  } from "../api/myself";
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    handleClickRouter,
    isLoading,
    navTo,
    cancelHalfButton,
    submitHalfButton,
    navBack
  } from "@/utils/util.js";
  import lodash from '@/utils/lodash.js'

  export default {
    data() {
      return {
        likeName: "", // 检索条件
        dataSource: [],
        pageBottom: false,
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        scrollTop: 0,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        addressList: [],
        dataPickerRef: null,
        cancelHalfButton,
        submitHalfButton,
        informationId: '',
        informationId_text: '',
        informationData: ''
      };
    },
    onLoad() {
      this.getBusiness()
      uni.$on('actual_enterprises_addBusiness', () => {
        this.getBusiness()
      })
      informationTree().then((res) => {
        if (res.code == 200) {
          this.addressList = res.result || [];
        }
      });
    },
    onUnload() {
      uni.$off("actual_enterprises_addBusiness");
    },
    methods: {
      getBusiness() {
        this.dataSource = [];
        this.pageConfig.pageNo = 1;
        this.getList();
      },
      handleClickRouter,
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) this.getList();
        else this.pageBottom = true;
      },

      input_change(e) {
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      async getList() {
        isLoading()
        try {
          let params = {
            likeName: this.likeName,
            pageNo: this.pageConfig.pageNo,
            pageSize: this.pageConfig.pageSize,
          }
          if (this.informationId) {
            params.informationId = this.informationId
          }
          const {
            result
          } = await getAction("/company/message/enterpriseList", params);
          this.dataSource = this.dataSource.concat(result.records || []);
          this.pageConfig.total = result.total;
        } catch (error) {
          console.log("error", error);
        } finally {
          isLoading(false)
        }
      },
      handleDetail(item) {
        uni.$emit('selected-unit', item)
        navBack()
      },
      handleFilterEnterpress() {
        this.$refs.dataPickerRef.show()
      },
      handleDataPickerChange(e) {
        // 给 text 和 value 赋值
        let value = lodash.get(e, 'detail.value', [])
        if (value.length) {
          // 取最后一个的值作为 value 
          // 合并 text 展示
          let id = value[value.length - 1].value
          this.informationId = id
          let text = [...value].reverse().map((item) => {
            return item.text
          }).join('/')
          this.informationId_text = text
          this.handleSubmit()
        }
      },
      handleSubmit() {
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
        this.$refs.dataPickerRef.hide()
      },
      handleReset() {
        this.informationId = ''
        this.informationId_text = ''
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
        this.$refs.dataPickerRef.clear()
        this.$refs.dataPickerRef.hide()
      },
      onPopupclosed(e) {}
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .u-icon,
  .u-icon__icon {
    font-size: 16rpx;
  }

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
  }

  .picker-data-box {
    display: flex;
    padding: 15rpx 0;

    /deep/.u-button__text {
      font-weight: 500 !important;
    }
  }

  .search-wrap {
    padding: 20rpx 30rpx;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    display: flex;

    .right-filter-box {
      color: rgb(36, 136, 245);
      display: flex;
      align-items: center;

      .icon-filter {
        width: 33rpx;
        height: 35rpx;
        margin-left: 4rpx;
        margin-right: 4rpx;
      }

      .i-text {
        font-size: 28rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        flex-shrink: 0;
        max-width: 150rpx;
      }
    }
  }

  .list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20rpx;

    .list-container {
      flex: 1;
      overflow: scroll;

      .house-info {
        background: #fff;
        border-radius: 16rpx;
        border: 1rpx solid #f4f5f7;

        margin: 10rpx 0;
        padding: 30rpx 30rpx 24rpx 48rpx;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .house-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: bold;
          font-size: 30rpx;
          color: #000000;
          margin-bottom: 8rpx;
        }

        .info-row {
          display: flex;
          align-items: center;

          .label {
            min-width: 120rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #a2a0a0;
          }

          .value {
            font-weight: 400;
            font-size: 26rpx;
            color: #6b6b6b;
            margin-left: 15rpx;
          }
        }
      }
    }
  }
</style>